<template>
  <view>

    <view class="flex-col page">
      <uni-nav-bar dark :fixed="true" shadow background-color="#497bff" status-bar title="教师信息注册" />

      <view class="flex-col flex-1 group">

        <u-toast ref="uToast" />


        <u-form :model="form"  ref="uForm">














          <view class="flex-row  self-start section">
            <text class="flex-row  items-centers ">头像</text>
            <view class="flex-row justify-start items-center image-wrapper">


              <u-upload class="image_1000" :action="action" max-count=1 :show-progress=avaterFlag
                name="file"></u-upload>

            </view>
          </view>
          <u-form-item label="姓名" prop="nickName">
            <u-input v-model="form.nickName" />
          </u-form-item>

          <u-form-item label="性别" prop="sex">
            <u-radio-group v-model="form.sex">
              <u-radio @change="radioChange" v-for="(item, index) in radioList" :key="index" :label="item.name"
                :name="item.value" :disabled="item.disabled">
                {{item.name}}
              </u-radio>
            </u-radio-group>
          </u-form-item>

          <u-form-item label="联系电话" prop="phonenumber" label-width="120rpx">
            <u-input v-model="form.phonenumber"   :disabled="true" />
          </u-form-item>
          <u-form-item label="联系地址" prop="address" label-width="120rpx">
            <u-input v-model="form.address" />
          </u-form-item>

          <u-form-item label="课程" prop="course">

            <u-select v-model="show" mode="single-column" :list="courseOptions" @confirm="confirms"></u-select>
            <u-input v-model="form.course" type="select" @click="show = true" placeholder="请选择" />
          </u-form-item>
        </u-form>



        <view class="button" @click="submit"><text>完成</text></view>
        <!-- <view class="flex-col justify-start items-center input text-wrapper"><text class="font text_13">下一页</text></view> -->

      </view>
    </view>




    <!-- //下一页 -->

  </view>
</template>

<script>
  import { createAlarm } from "@/js_sdk/nativeMsg.js";
  import {
    mapState,
    mapGetters
  } from 'vuex'
  export default {
    onBackPress(options) {
      return true;
    },
    computed: {
      ...mapState(['vuex_avater']),
    },
    props: {},
    data() {
      return {
        // 演示地址，请勿直接使用
        avaterFlag: false,
        index: '',
        action: '',
        next: true,
        show: false,
        birthdayShow: false,
        selectLabel: '',
        courseOptions: [{
          value : '',
          label : '无'
        }],



        form: {
          nickName: '',
          sex: '',
          phonenumber: '',
          address: "",
          course: ''



        },


        radioList: [{
            name: '男',
            value: "0",
            disabled: false
          },
          {
            name: '女',
            value: "1",
            disabled: false
          }

        ],
        rules: {
          nickName: [{
              required: true,
              message: '请输入姓名',
              trigger: ['blur', 'change']
            },
            {
              min: 2,
              max: 30,
              message: '姓名长度在2到30个字符',
              trigger: ['blur', 'change']
            }
          ],

          sex: [{
            required: true,
            trigger: ['change', 'blur'],
            message: '请选择性别',
          }],
          course: [{
            required: true,
            trigger: ['change', 'blur'],
            message: '请选择课程',
          }],
          phonenumber: [{
              required: true,
              message: '请输入手机号',
              trigger: ['blur', 'change']
            },
            {
              pattern: /^1[3-9]\d{9}$/,
              // 正则检验前先将值转为字符串
              transform(value) {
                return String(value);
              },
              message: '手机格式错误',
              trigger: ['blur', 'change']
            },
          ],

          address: [{
            required: true,
            trigger: ['change', 'blur'],
            message: '请填写联系地址'
          }]

        },
      }
    },
    onLoad(option) {
      this.action =   this.vuex_config.baseUrl +'/mobile/login/upload?phonenumber='+option.phoneNo
     this.form.phonenumber = option.phoneNo
   
    },
    // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
    onReady() {
      this.$refs.uForm.setRules(this.rules);
      this.getCourseOptions()
    },
    methods: {
      confirms(e) {
        if (e[0].label1 == "无") {
           this.form.course = ''
        } else {
          this.form.course = e[0].label
        }
      },
      /** 查询课程列表 */
      getCourseOptions() {
        this.$u.api.courseList().then(response => {
          console.log(response)
          for (const item of response.rows) {
            this.courseOptions.push({
              label: item.coursename,
              value: item.coursename
            })
          }



        })
      },





      selectBirthdayConfirm(e) {
        this.tabIndex = e
        this.birthdayShow = true

      },
      selectConfirm(e) {
        this.index = e
        this.show = true

      },




      back() {
        this.next = !this.next
      },
      submit() {

        this.$refs.uForm.validate(valid => {
          if (valid) {
            this.$u.api.registerTeacherInfo(
              this.form
              ).then(res => {
                if(res.code == '200'){
                     uni.navigateTo({
                       url: '/pages/sys/login/index?show=1'
                     })
                     
                 let msg = {
                 	warningTypeStr: "通知消息",
                 	projectName: "现在",
                 	description: "注册成功",
                   messageImage: ''
                 };
                this.createAlarm(msg, res => {
                 });
                 
                 
                }
                // this.$u.vuex('vuex_studentArray',res.data)
              
              
              
              
              
            })



            console.log('验证通过');
          } else {
            console.log('验证失败');
          }
        });
      },

      // 日期选择

      radioChange(e) {
        this.sex = e
      }

    },

  };
</script>

<style scoped lang="scss">
  /************************************************************
  ** 请将全局样式拷贝到项目的全局 CSS 文件或者当前页面的顶部 **
  ** 否则页面将无法正常显示                                  **
  ************************************************************/


  view,
  image,
  text {
    box-sizing: border-box;
    flex-shrink: 0;
  }

  .circle-upload .u-upload-wrapper {
    width: 100px;
    /* 设置上传组件的宽度 */
    height: 100px;
    /* 设置上传组件的高度 */
    border-radius: 50%;
    /* 设置边框半径为上传组件宽度和高度的一半，使其呈现圆形 */
    background-color: #f5f5f5;
    /* 设置上传组件的背景颜色 */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .circle-upload .u-upload-wrapper .u-upload-text {
    font-size: 16px;
    /* 设置上传文字的字体大小 */
    color: #333;
    /* 设置上传文字的颜色 */
  }

  .panel-list {
    padding: 0 10px;
    position: relative;
    top: -10px;

    .panel {
      background-color: white;
      border-radius: 3px;
      margin-bottom: 8px;

      .panel-body {
        display: flex;
        justify-content: space-around;

        .panel-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-around;
          font-size: 13px;
          padding: 10px 0;
        }
      }
    }
  }

  .flex-row {
    display: flex;
    flex-direction: row;
    justify-content: space-around;

  }

  .flex-col {
    display: flex;
    flex-direction: column;

  }

  .justify-start {

    justify-content: center;
  }

  .justify-end {
    justify-content: flex-end;
  }

  .justify-center {
    justify-content: center;
  }

  .justify-between {
    justify-content: space-between;
  }

  .justify-around {
    justify-content: space-around;
  }

  .justify-evenly {
    justify-content: space-evenly;
  }

  .items-start {
    align-items: flex-start;
  }

  .items-end {
    align-items: flex-end;
  }

  .items-centers {
    position: relative;
    left: -127%;
    align-items: center;
    justify-content: start;
  }

  .items-center {
    align-items: center;
    justify-content: center;
  }

  .items-baseline {
    align-items: baseline;
  }

  .items-stretch {
    align-items: stretch;
  }

  .self-start {
    position: relative;
    left: 37%;
    align-self: center;
  }

  .self-end {
    align-self: flex-end;
  }

  .self-center {
    align-self: center;
  }

  .self-baseline {
    align-self: baseline;
  }

  .self-stretch {
    align-self: stretch;
  }

  .flex-1 {
    flex: 1 1 0%;
  }

  .flex-auto {
    flex: 1 1 auto;
  }

  .grow {
    flex-grow: 1;
  }

  .grow-0 {
    flex-grow: 0;
  }

  .shrink {
    flex-shrink: 1;
  }

  .shrink-0 {
    flex-shrink: 0;
  }

  .relative {
    position: relative;
  }


  .button {
    color: #ffffff;
    font-size: 32rpx;
    width: 95%;
    height: 80rpx;
    background: #497bff;

    box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(15, 168, 250, 0.4);
    border-radius: 10rpx;
    line-height: 80rpx;
    text-align: center;
    margin: 50rpx auto 0;
  }

  .mt-15 {
    width: 300rpx;
  }

  w {
    margin-top: 34rpx;

  }

  .page {
    background-color: #ffffff;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;

    .group {
      padding: 0 50rpx 172rpx;
      overflow-y: auto;

      .text_2 {
        color: #505050;
        font-size: 52rpx;
        font-family: HarmonyOSSansSC;
        line-height: 48.36rpx;
      }

      .font {
        font-size: 32rpx;
        font-family: HarmonyOSSansSC;
        line-height: 29.4rpx;
        color: #000000;
      }

      .text_3 {
        color: #9e9e9e;
        line-height: 30.08rpx;
      }

      .section {
        margin-top: 56rpx;

        background-size: 100% 100%;
        background-repeat: no-repeat;
        width: 172rpx;

        .image-wrapper {
          position: relative;
          left: -15%;
          padding: 64rpx;
          background-image: url('/static/iconfont/CameraBackgroud.png');
          background-size: 100% 100%;
          background-repeat: no-repeat;
          justify-content: center;
          width: 172rpx;

          .image_4 {
            position: relative;
            width: 48rpx;
            height: 42rpx;
            opacity: 0;
            /* 设置透明度为 0 */
          }

          .image_1000 {
            position: absolute;
            top: -40rpx;
            left: -25rpx;
            opacity: 1;
            /* 设置透明度为 0 */
          }
        }
      }

      .equal-division {
        align-self: flex-start;
        margin-top: 60rpx;

        .image_5 {
          width: 32rpx;
          height: 32rpx;
        }

        .font_2 {
          font-size: 26rpx;
          font-family: HarmonyOSSansSC;
          line-height: 25.64rpx;
          color: #000000;
        }

        .text_4 {
          font-size: 28rpx;
          color: #b9b9b9;
        }

        .text_5 {
          font-size: 28rpx;
        }
      }

      .group_2 {
        width: 365.96rpx;
      }

      .group_3 {
        padding-bottom: 24rpx;
        border-bottom: solid 2rpx #dadada;

        .text_6 {
          line-height: 24.18rpx;
        }

        .text_7 {
          line-height: 29.12rpx;
        }

        .text_9 {
          line-height: 24.1rpx;
        }

        .text_10 {
          line-height: 29.48rpx;
        }
      }

      .view {
        margin-top: 56rpx;
      }

      .group_4 {
        padding: 0 4rpx 24rpx;
        border-bottom: solid 2rpx #dadada;

        .text_8 {
          line-height: 24.34rpx;
        }
      }

      .view_2 {
        margin-top: 52rpx;
      }

      .font_3 {
        font-size: 26rpx;
        font-family: HarmonyOSSansSC;
        line-height: 25.64rpx;
      }

      .view_3 {
        margin-top: 52rpx;
      }

      .group_5 {
        align-self: stretch;
        margin-top: 52rpx;

        .text_11 {
          line-height: 24rpx;
        }

        .text_12 {
          line-height: 30.02rpx;
        }
      }

      .input {
        align-self: stretch;
        margin-top: 80rpx;

        .text_13 {
          color: #ffffff;
          line-height: 27.72rpx;
        }
      }

      .text-wrapper {
        padding: 28rpx 0 40rpx;
        background-image: url('https://ide.code.fun/api/image?token=65c106ae78b1d90011092dd9&name=95ee8f4e2c5c2c5ac4426145e983c631.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
    }
  }
</style>